<template>
  <div class="detailInfo">
    <van-dialog
      v-model="showDialog"
      :before-close="beforeClose"
      show-cancel-button>
      <div class="tips">确认将退货单{{refundDetail.order_refund_sn}}作废 ？
        退单作废后状态不可回退 ，如有关联的入库单将一并作废 如确定作废,请填写作废原因 :</div>
      <van-field
        v-model="voidData.remark"
        placeholder="请输入作废理由"
      />
    </van-dialog>
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="status">
      <span class="txt" v-if="refundDetail.status === 0">待处理</span>
      <span class="txt" v-if="refundDetail.status === 1">收货确认</span>
      <span class="txt" v-if="refundDetail.status === 2">退款确认</span>
      <span class="txt" v-if="refundDetail.status === 3">已完成</span>
      <span class="txt" v-if="refundDetail.status === 4">已作废</span>
      <a class="fr btn" v-if="refundDetail.status === 0" @click="showDialog = true">作废</a>
    </div>
    <div class="order">
      <div class="title">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">退单号：</span>
        <span class="title-sn">{{ refundDetail.order_refund_sn }}</span>
        <a class="btn" @click="handleClipboard(refundDetail.order_refund_sn, $event)">复制</a>
      </div>
      <div class="title" v-if="refundDetail.order_sn">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">关联订单号：</span>
        <span class="title-sn">{{ refundDetail.order_sn }}</span>
      </div>
    </div>
    <div class="address">
      <div class="icon"><svg-icon icon-class="icon_address" /></div>
      <div class="address-info">
        <span class="txt1">{{ refundDetail.address_name }}  {{ refundDetail.address_mobile }}</span>
        <div class="txt2">{{ refundDetail.address_address }}</div>
      </div>
    </div>
    <div class="goods">
      <tpl-goods-slide :item-list="refundDetail.item_list"/>
    </div>
    <div class="action">
      
      <div class="remark">
        <div class="remark1">
          <svg-icon class="icon" icon-class="icon_edit"/>
          <span v-if="remarkStatus" class="remark2" @click="remarkStatus = false">{{ refundDetail.remark? refundDetail.remark: '订单备注' }}</span>
          <div v-if="!remarkStatus" class="input">
            <textarea v-model="remark" type="textarea" @blur="editRemark"/>
          </div>
        </div>
        <!--<input v-model="refundDetail.remark" class="input" type="text" placeholder="备注信息">-->
      </div>
    </div>
    <div class="order action">
      <div class="action-record">
        <svg-icon class="icon" icon-class="icon_action" />
        <span class="txt">操作日志</span>
        <i class="fr van-icon van-icon-arrow"/>
      </div>
      <div class="content">
        <div v-for="item in refundDetail.log_list" :key="item.refund_log_id" class="inline">
          <span>{{ item.action_type }}</span><span class="fr">{{ item.create_time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { OrderRefundDetail, editRefundRemark, cancelOrderRefund } from '@/api/refund'
  import tplGoodsSlide from '../../components/tplGoodsSlide'
  import clipboard from '@/utils/clipboard'
  export default {
    name: 'Index',
    components: {
      tplGoodsSlide
    },
    data() {
      return {
        voidData: {
          remark: '',
          order_refund_id: undefined
        }, // 作废原因
        showDialog: false,
        loading: false,
        refundDetail: {},
        remark: '',
        remarkStatus: true
      }
    },
    created() {
      this.GetRefundDetailFn()
    },
    methods: {
      // 作废
      beforeClose(action, done) {
        if (action === 'confirm') {
          const dataset = this.voidData
          dataset.order_refund_id = this.refundDetail.order_refund_id
          this.cancelOrderRefundFn(dataset)
          done()
        } else {
          done()
        }
      },
      cancelOrderRefundFn(dataset) {
        cancelOrderRefund(dataset).then(res => {
          this.showDialog = false
          const data = res.data
          if (data.status_code === 200) {
            this.$toast.success({
              duration: 1500,
              message: data.message
            })
            this.voidData.remark = ''
            this.GetRefundDetailFn()
          } else {
            this.$toast.fail({
              message: data.message,
              duration: 1500
            })
          }
        })
      },
      // 修改订单备注
      editRemark() {
        const formData = {
          order_id: this.$route.query.id,
          remark: this.remark
        }
        editRefundRemark(formData).then(res => {
          this.remarkStatus = true
          const data = res.data
          if (data.status_code === 200) {
            this.$toast.success({
              duration: 1500,
              message: data.message
            })
            this.GetRefundDetailFn()
          } else {
            this.$toast.fail({
              message: data.message,
              duration: 1500
            })
          }
        })
      },
      // 获取订单详情
      GetRefundDetailFn() {
        this.loading = true
        const formData = {
          order_refund_id: this.$route.query.id
        }
        OrderRefundDetail(formData).then(res => {
          this.loading = false
          const data = res.data
          if (data.status_code === 200) {
            this.refundDetail = data.data
            this.$emit('detailData', data.data)
          } else {
            this.$toast.fail({
              message: data.message,
              duration: 1500
            })
          }
        })
      },
      // 复制功能
      handleClipboard(text, event) {
        clipboard(text, event)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .detailInfo{
    .tips{
      color: #666;
      font-size: pxCalc(13px);
      padding: pxCalc(15px) pxCalc(15px) 0;
    }
    .status{
      background: #fff;
      height: pxCalc(50px);
      line-height: pxCalc(50px);
      border-bottom: pxCalc(1px) solid #f5f5f5;
      padding-left: pxCalc(20px);
      font-size: pxCalc(14px);
      font-weight: bold;
      .btn{
        border: pxCalc(1px) solid #8a6d3b;
        background: #8a6d3b;
        line-height: pxCalc(23px);
        padding:0 pxCalc(12px);
        display: inline-block;
        font-size: pxCalc(12px);
        color: #fff;
        font-weight: normal;
        border-radius: pxCalc(3px);
        margin-right: pxCalc(20px);
        margin-top: pxCalc(12px);
        &:active{
          background: #927748;
        }
      }
      .txt{
        color: #ff9600;
      }
    }
    .goods{
      padding-left: pxCalc(20px);
      background: #fff;
    }
    .address{
      background: #fff;
      padding: pxCalc(15px) 0 pxCalc(13px) pxCalc(20px);
      border-bottom: pxCalc(1px) solid #f5f5f5;
      margin-bottom: pxCalc(5px);
      .icon{
        font-size: pxCalc(22px);
        display: inline-block;
        vertical-align: pxCalc(13px);
        margin-right: pxCalc(5px);
      }
      &-info{
        display: inline-block;
        .txt1{
          font-size: pxCalc(15px);
          color: #363b43;
        }
        .txt2{
          font-size: pxCalc(14px);
          color: #999999;
          width: pxCalc(300px);
          @include showEllipsis;
        }
      }
    }
    .action{
      background: #fff;
      padding-left:pxCalc(20px);
      margin-bottom: pxCalc(5px);
      .icon{
        color: #9e9e9e;
        font-size: pxCalc(14px);
        margin-right: pxCalc(8px);
        vertical-align: pxCalc(-3px);
      }
      &-record{
        border-bottom: pxCalc(1px) solid #f5f5f5;
        padding: pxCalc(14px) pxCalc(20px) pxCalc(14px) 0;
        .txt{
          font-size: pxCalc(14px);
          color: #363b43;
        }
        .van-icon{
          margin-top: pxCalc(3px);
          font-size: pxCalc(14px);
          color: #b1b1b1;
        }
      }
      .remark{
        padding: pxCalc(14px) pxCalc(20px) pxCalc(14px) 0;
        .remark1{
          font-size: pxCalc(14px);
        }
        .remark2{
          font-size: pxCalc(13px);
          text-indent: 2em;
          color: #a1a1a1;
        }
        .input{
          display: inline-block;
          vertical-align: top;
          border: 1px solid #ddd;
          padding: pxCalc(5px);
          width: 90%;
          border-radius: pxCalc(4px);
          textarea{
            border: none;
          }
        }
      }
    }
    .order{
      padding-left: pxCalc(20px);
      background: #fff;
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        .icon{
          width: pxCalc(17px);
          display: inline-block;
          vertical-align: pxCalc(-4px);
          margin-right: pxCalc(6px);
          margin-left: pxCalc(3px);
          img{
            width: 100%;
          }
        }
        &-sn{
          color: #363b43;
        }
        .order-sn{
          color: #999999;
          font-size: pxCalc(13px);
        }
        .btn{
          border: pxCalc(1px) solid #e5e5e5;
          line-height: pxCalc(23px);
          padding:0 pxCalc(12px);
          display: inline-block;
          font-size: pxCalc(12px);
          color: #363b43;
          border-radius: pxCalc(3px);
          margin-left: pxCalc(4px);
          &:active{
            background: #f5f5f5;
          }
        }
      }
      .content{
        padding: pxCalc(12px) 0;
        .inline{
          padding-right: pxCalc(20px);
          line-height: pxCalc(30px);
          font-size: pxCalc(13px);
          color: #999999;
        }
      }
    }
  }
</style>
